<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-demo="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .router-link-active {
            color:#f00;
        }
        pre {
            font-family: sans-serif;
            font-size: 1em;
            line-height:1.5em;
        }

    </style>
</head>
<body>
    <div id="app">
        <counter></counter>
    </div>
</body>

<script src="../../vender/vue@2.4.2.js"></script>
<script src="../../vender/vuex@2.0.0.min.js"></script>
<!--<script src="../vue-router@2.7.0.js"></script>-->

<script>
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            incr(state) {
                state.count++;
            },
            decr(state) {
                state.count--;
            }
        }
    });
    const Counter={
        template:`<div>
            count:{{count}}<br>
            countPlusLocalCount:{{countPlusLocalCount}}<br>
            <button @click="incr">Incr</button>
            <button @click="decr">decr</button>
        </div>`,
        data(){
            return {
                localCount:10000
            }
        },
        computed:Vuex.mapState({
            count:state=>state.count,
            countAlias:'count',//传字符串参数'count'等同于 'state=>state.count'
            countPlusLocalCount(state){
                return state.count+this.localCount;
            }
        }),
        methods:{
            incr(){
                this.$store.commit('incr');
            },
            decr(){
                this.$store.commit('decr');
            }
        }
    };

    new Vue({
        el:'#app',
        store,
        components:{
            Counter
        }
    });

</script>
</html>